/**
 * 搜索车辆结果
 * @author xiaoxujs
 */

import { Input, message, Modal, Popover, Select } from "antd";
import { forwardRef, ForwardRefRenderFunction, useEffect, useImperativeHandle, useState } from "react";
import { DataStyle, FormBoxStyle, Hongdian } from "../../style";
import { ISelectList } from "../../../../type/antd";
import { SearchProps } from "antd/es/input";
import { postBaseSortGetInfo } from "../../api";
import { IBaseSortGetInfo } from "../../../../type/cheliangpaidui";
import { ShengDiv, ShengTanchaung } from "../../../../assets/style/ShengTanchaung";
import { licensePlateAbbreviations } from "../../../../assets/data";

const { Search } = Input;

// 定义你想要暴露的ref接口
export interface IChildRef {
    handleGetData: (plateColor: string, licensePlate: string, carSheng: string) => Promise<void>;
}

const SearchModule: ForwardRefRenderFunction<IChildRef, {
    open: boolean;
    carColorList: ISelectList[];
    handleSearchCallback: () => void;
    carShengNew: string; // 车辆省份
}> = ({
    open,
    carColorList,
    handleSearchCallback,
    carShengNew
}, ref) => {
        useImperativeHandle(ref, () => ({
            handleGetData: handleGetData
        }))
        const [carSheng, setCarSheng] = useState('陕'); // 省
        const [carShengShow, setCarShengShow] = useState(false); // 省弹窗显示与否
        const [detailsData, setDetailsData] = useState<IBaseSortGetInfo>(); //数据
        const [plateColor, setPlateColor] = useState<string>(); //检索车辆信息 - 车牌颜色
        const [licensePlate, setLicensePlate] = useState<string>(''); //检索车辆信息 - 车牌号
        useEffect(() => {
          setCarSheng(carShengNew);
        
        }, [carShengNew])
        

        const ShengHtml = <ShengTanchaung>
            {
                licensePlateAbbreviations.map((item) => {
                    return <div
                        key={item}
                        className={carSheng === item ? 'li-car active' : 'li-car'}
                        onClick={() => {
                            setCarSheng(item);
                        }}
                    >
                        {item}
                    </div>
                })
            }
        </ShengTanchaung>
        /**
         * 获取车牌排队信息
         * @param plateColor 车牌颜色
         * @param licensePlate 车牌号
         */
        const handleGetData = async (plateColor: string, licensePlate: string, carSheng: string) => {
            const params = {
                plateColor,
                licensePlate: carSheng + licensePlate,
            }
            const { code, msg, data } = await postBaseSortGetInfo(params) as { code: number; msg: string; data: IBaseSortGetInfo };
            if (code === 20000) {
                setDetailsData(data);
            } else {
                message.error(msg);
            }
            setPlateColor(plateColor)
            setLicensePlate(licensePlate)
        }
        const handleChange = (value: string) => {
            setPlateColor(value)
        };

        const selectAfter = (
            <div style={{ display: 'flex', alignItems: 'center' }}>
                <Select
                    style={{ width: "7rem" }}
                    onChange={handleChange}
                    options={carColorList}
                    value={plateColor}
                />
                <Popover content={ShengHtml} trigger="click" onOpenChange={(open) => {
                    setCarShengShow(open)
                }}>
                    <ShengDiv>
                        <span style={{ color: !carShengShow ? 'rgba(0, 0, 0, 0.88)' : 'rgba(0, 0, 0, 0.45)' }} >{carSheng}</span><span className="iconfont" style={{ fontSize: '1.2rem', color: 'rgba(0, 0, 0, 0.88)' }}>&#xe661;</span>
                    </ShengDiv>
                </Popover>
            </div>

        );
        const onChange = (value: string) => {
            setLicensePlate(value)
        }
        const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
            if (value === '') {
                message.warning('请输入车牌号')
            } else if (!plateColor) {
                message.warning('请选择车辆颜色')
            } else {
                handleGetData(plateColor,  value, carSheng)
            }
        }
        const handleOk = () => {
            setPlateColor(undefined)
            setLicensePlate('')
            handleSearchCallback()
        };

        return <Modal title="搜索结果" open={open} onOk={handleOk} onCancel={handleOk}>
            <FormBoxStyle>
                <span style={{ marginRight: '2rem' }}>
                    <Hongdian>*</Hongdian>
                    <span>车牌号</span>
                </span>
                <Search
                    addonBefore={selectAfter}
                    placeholder="搜索车牌号"
                    allowClear
                    onSearch={onSearch}
                    onChange={(e) => onChange(e.target.value)}
                    style={{ width: '27.3rem' }}
                    value={licensePlate}
                />
            </FormBoxStyle>
            <DataStyle>
                <div className="left"> 车道：{detailsData ? detailsData.laneName : '--'}</div>
                <div className="right">排队名次：{detailsData ? detailsData.sort : '--'} </div>
            </DataStyle>



        </Modal>
    }

export default forwardRef(SearchModule);